import {ModalForm, ProFormText, ProFormSelect} from "@ant-design/pro-components";
import {SocialUserVO} from "@/services/SocialUserService";
import {useRef, useState} from "react";
import {ProFormInstance} from "@ant-design/pro-form/lib";
import {RequestOptionsType} from "@ant-design/pro-utils";
import {useModel, useSnapshot} from "@@/exports";
import {SocialUserModel} from "@/models/socialUser";


export interface SocialUserUpdateModalProps {
    onFinish: (formData: any) => Promise<boolean | void>;
}

const SocialUserUpdateModal = (props: SocialUserUpdateModalProps) => {
    let {getDictList} = useModel("dict");
    let socialUserState = useSnapshot(SocialUserModel.state);
    let {actions: socialUserActions} = SocialUserModel
    const formRef = useRef<ProFormInstance>()
    return <>
        <ModalForm
            key={socialUserState.socialUser?.id || -1}
            formRef={formRef}
            title={socialUserState.socialUser ? "修改社交用户" : "添加社交用户"}
            open={socialUserState.updateModalState}
            initialValues={socialUserState.socialUser}
            onFinish={props.onFinish}
            onOpenChange={socialUserActions.setUpdateModalState}
            >
            <ProFormText
                    label="用户id"
                    name="id"
                    rules={[{required: true, message: "请填写用户id"}]}
            />


            <ProFormSelect
                    label="社交平台的类型"
                    name="type"
                    request={async () => getDictList('social_type') as RequestOptionsType[]}
                    rules={[{required: true, message: "请选择社交平台的类型"}]}
                />


            <ProFormText
                    label="用户昵称"
                    name="nickname"
                    rules={[{required: true, message: "请填写用户昵称"}]}
            />


            <ProFormText
                    label="手机号"
                    name="phone"
            />


            <ProFormText
                    label="用户头像"
                    name="avatar"
            />


        </ModalForm>
    </>
}

export default SocialUserUpdateModal
